/*
*   @Author: 1296
*   @Date: 2025-03-23
*   @Description: 帮助中心
*/

<script setup>
import { useI18n } from 'vue-i18n'
import titleLogo from '@/assets/title.png'
import aboutLogo from '@/assets/aboutLogo.png'

const { t } = useI18n()
const faqs = [
  {
    question: t('HC.faq.resetPassword.question'),
    answer: t('HC.faq.resetPassword.answer')
  },

  {
    question: t('HC.faq.Sign.question'),
    answer: t('HC.faq.Sign.answer')
  },

  {
    question: t('HC.faq.resetRole.question'),
    answer: t('HC.faq.resetRole.answer')
  },

  {
    question: t('HC.faq.contactSupport.question'),
    answer: t('HC.faq.contactSupport.answer',{ email: 'hh1296@foxmail.com' })
  },
]
</script>

<template>
  <div class="help-center">
    <header class="header">
      <img :src="titleLogo" :alt="t('HC.title')" class="header-logo">
      <h1>{{ t('HC.title') }}</h1>
    </header>

    <main class="main-content">
      <section class="faq-section card">
        <h2>{{ t('HC.faq.title') }}</h2>
        <div class="divider"></div>
        <ul class="faq-list">
          <li v-for="(faq, index) in faqs" :key="index" class="faq-item">
            <div class="faq-content">
              <h3 class="question">{{ faq.question }}</h3>
              <p class="answer">{{ faq.answer }}</p>
            </div>
          </li>
        </ul>
      </section>

      <section class="contact-section card">
        <h2>{{ t('HC.contact.title') }}</h2>
        <div class="divider"></div>
        <img :src="aboutLogo" :alt="t('HC.about')" class="about-logo">
        <ul class="contact-list">
          <li class="contact-item">
            <i class="icon icon-email"></i>
            <span>
              {{ t('HC.contact.emailLabel') }}
              <a href="mailto:hh1296@foxmail.com">hh1296@foxmail.com</a>
            </span>
          </li>
          <li class="contact-item">
            <i class="icon icon-phone"></i>
            <span>{{ t('HC.contact.phoneLabel') }} +86 152-5679-7405</span>
          </li>
        </ul>
      </section>
    </main>
  </div>
</template>

<style scoped>
:root {
  --primary-color: #2563eb;
  --secondary-color: #4f46e5;
  --text-color: #374151;
  --background-color: #f8fafc;
}

.help-center {
  max-width: calc(1200 / 1920 * 100vw);
  margin: 0 auto;
  padding: 2rem 1rem;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-color);
}

.header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.header-logo {
  width: calc(300 / 1920 * 100vw);
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.header-text h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.about-logo {
  width: calc(220 / 1920 * 100vw);
  margin: 1.5rem auto;
  display: block;
  opacity: 0.9;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin-bottom: 2rem;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

h2 {
  font-size: 1.8rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.divider {
  height: calc(2 / 1920 * 100vw);
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  margin: 1.5rem 0;
  opacity: 0.2;
}

.faq-list {
  display: grid;
  gap: 1.5rem;
}

.faq-item {
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--background-color);
  border-left: 4px solid var(--primary-color);
  transition: all 0.2s ease;
}

.faq-item:hover {
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question {
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.answer {
  color: #64748b;
  line-height: 1.6;
}

.contact-list {
  display: grid;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: var(--background-color);
}

.icon {
  display: inline-block;
  width: calc(24 / 1920 * 100vw);
  height: calc(24 / 1920 * 100vw);
  background-size: contain;
}

.icon-email {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232563eb"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}

.icon-phone {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232563eb"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>');
}

a {
  color: var(--primary-color);
  text-decoration: none;
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--secondary-color);
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

@media (max-width: 768px) {
  .header h1 {
    font-size: 2rem;
  }

  .card {
    padding: 1.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}
</style>
